import React from 'react'
import { Breadcrumb, Table,Button,Modal,message,Popconfirm,Input} from 'antd';
import { Link } from 'react-router-dom';
import AddRole from './AddRole.js'
import UpdateRole from './UpdateRole.js'
import SetPower from './SetPower.js'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { LoadRoleActionAsync,deleteRoleActionAsync,searchRoleActionAsync } from '../../../redux/action/roleAction'
const { Search } = Input;
function RoleMgr(props) {
  const [params,setParams] = React.useState({page:1,limit:4})
  const [showAddRoleDialog,setshowAddRoleDialog] = React.useState(false)
  const [selectedRows,setSelectedRows] = React.useState([])
  const [selectedRowKeys,setSelectedRowKeys] = React.useState([])
  const [selectedRowKey,setSelectedRowKey] = React.useState([])
  const [showEditRoleDialog,setShowEditRoleDialog] = React.useState(false)
  const [setPowerDialog,setSetPowerDialog] = React.useState(false)
  const columns = [
  {
    title: '角色名',
    dataIndex: 'name',
    align:'center',
    ellipsis:true,
  },
  {
    title: '状态',
    dataIndex: 'status',
    align:'center',
    ellipsis:true,
    render:(status,row)=><span>{status===1?'启用':'禁用'}</span>
  },
  {
    title: '提交时间',
    ellipsis:true,
    dataIndex: 'submitTime',
    align:'center',
  },
  {
    title: '描述',
    ellipsis:true,
    dataIndex: 'des',
    align:'center',
  },
  {
    dataIndex: 'del',
    title:'编辑',
    align:'center',
    render:(del,row)=>{
      return(
        <div>
          <Button type='primary' style={{marginRight:'15px'}} onClick={()=>{
            setShowEditRoleDialog(true)
            setSelectedRowKey([row.key])
          }}>编辑</Button>
          <Popconfirm
            onConfirm={()=>{
              deleteRole(row.key)
            }}
            okText='确认'
            cancelText='取消'
            title='你确认要删除吗?'
          >
              <Button type='danger'>删除</Button>
          </Popconfirm>
        </div>
      )
    }
  }
  ];
  const RoleRowSelection={
    onChange:(selectedRowKeys,selectedRows)=>{
      setSelectedRowKeys(selectedRowKeys)
      setSelectedRows(selectedRows)
    }
  }
  React.useEffect(() => {
    props.LoadRoleActionAsync(params)
  },[])
  async function changePage(page,pageSize){

    await setParams({page,pageSize})
    props.LoadRoleActionAsync(params)
  }
  let Buttonstyle={margin:"15px"}
  function hideAddRoleDialog(){
    setshowAddRoleDialog(false)
  }
  const handleDelete=()=>{
    if(selectedRowKeys.length<=0)
    {
      message.warn('你还未选中任何数据')
      return
    }
    Modal.confirm({
      title:'你确定要删除吗?',
      okText:'删除',
      cancelText:'取消',
      onOk:()=>{
        props.deleteRoleActionAsync(selectedRowKeys)
        props.LoadRoleActionAsync()
        setSelectedRowKeys([])
      }
    })
  }
  const deleteRole=(key)=>{
    props.deleteRoleActionAsync([key])
    props.LoadRoleActionAsync()
    message.success('删除成功!')
  }
  const handleSetPower=()=>{
    if(selectedRowKeys.length!==1){
      message.warn('请选择一条数据设置!')
      return
    }
    
    setSetPowerDialog(true)
  }
  const updateRole=()=>{
    if(selectedRowKeys.length<=0)
    {
      message.warn('你还未选中任何数据')
      return
    }
    if(selectedRowKeys.length===1)
    {
      setShowEditRoleDialog(true)
      setSelectedRowKey(selectedRowKeys)
    }
    else{
      message.error('你不能选择多条数据修改!')
    }
  }
  return (
    <div className='admin_RoleMgr'>
      <Breadcrumb>
        <Breadcrumb.Item>
          <Link to='/home'>首页</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Link to='/home/role_mgr'>角色管理</Link>
        </Breadcrumb.Item>
      </Breadcrumb>
      <hr/>
    <Button type="primary" onClick={()=>{setshowAddRoleDialog(true)}} style={Buttonstyle}>添加</Button>
    <Button type="danger" style={Buttonstyle} onClick={handleDelete}>删除</Button>
    <Button type="primary" style={Buttonstyle} onClick={updateRole}>修改</Button>
    <Button type="primary" style={Buttonstyle} onClick={handleSetPower}>设置权限</Button>
    <Search placeholder='搜索'
      style={{margin:'15px',width:'300px'}}
      enterButton
      onSearch={(value,e)=>{let v={value};props.searchRoleActionAsync(v)}}
    ></Search>
    <Button type="primary" style={Buttonstyle} onClick={()=>{props.LoadRoleActionAsync(params)}}>显示全部</Button>
    <Table 
      dataSource={props.roleList} 
      columns={columns} 
      rowSelection={{
        type: 'checkbox',
        ...RoleRowSelection,
      }}

      rowKey='key'
      pagination = {{pageSize:4,onChange:changePage}}
    />
    <AddRole visible={showAddRoleDialog} close={hideAddRoleDialog}></AddRole>
    <UpdateRole visible={showEditRoleDialog} selectedRowKey={selectedRowKey} close={()=>{
      setShowEditRoleDialog(false)
    }}></UpdateRole>
    <SetPower visible={setPowerDialog} role_name={selectedRows.length===1?selectedRows[0].name:''} role_key={selectedRowKeys[0]} close={()=>{setSetPowerDialog(false)}}></SetPower>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    roleList:state.roleList
	}),
	{LoadRoleActionAsync,deleteRoleActionAsync,searchRoleActionAsync}
)(RoleMgr)
